#canvasId {
    position: absolute;
    bottom: 36px;
    /*background-color: #FFFFcc;*/

}
.content {
	position: absolute;
	width: 100%;
	top: -2px;/* background image has 2px transparent space !!! */
	bottom: 0;
}
/*.fojing_pic {
    height: 500px;
    width: 88%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: flex-start;
    flex-wrap: wrap-reverse;
    margin-left: 6%;
    margin-right: 6%
}*/

.fojing_pic {
    width: 68%;
	height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: flex-start;
    flex-wrap: wrap-reverse;
    margin-left: 14%;
}

.word-frmame {
/*.fojing_pic {
	height: 500px;
	width: 88%;
	box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /*background-color: #fff;*/
    width: 30%;
    height: 18%;
}

/*.fojing_pic img {
    visibility: hidden;
    width: 75px;
    height: 75px;
}*/

.words_backgroud {
    background: url(../img/write/demo1.png) no-repeat center;
    background-size: 100% 100%;
	height: 75%;
}

.word-show {
    visibility: visible;
    /*padding-right: 23px;*/
    padding-right: 58px;
    padding-top: 20px;
    max-width: 78px;
    margin-left: 14%;
}


.word-hide {
    visibility: hidden;
    padding-right: 23px;
    padding-top: 20px;
	max-width: 78px;
    margin-left: 14%;
}

.icon > .icon {
	left: -100px;
}
.write {
	position: absolute;
	width: 100%;
	top: 64.4%;
	bottom: 0;
	box-sizing: border-box;
}
.write_detail {
	position: absolute;
	top: 0;
	bottom: 36px;
	width: 100%;
	background-color: #cccccc;
}
.write_left {
	position: absolute;
	height: 100%;
	right: 50px;
	left: 0;
	border-right: 1px solid #666666;
	border-bottom: 1px solid #666666;
}	
.write_left img {
	position: absolute;
	height: 80px;
	width: 80px;
	opacity: 0.7;
	left: 50%;
	top: 50%;
	margin: -40px;
}
.write_right {
	position: relative;
	height: 100%;
	width: 50px;
	float: right;
	background-color: #202f47;
}
.write_right_embg{
	background-color: #cccccc;
}
.tanchukuang{
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 50px;
	background-color: #202f47;
	text-align: center;
    z-index: 10;



	
}
.tanchukuang img{
	width: 30px;
	height: 30px;
}

.tanchukuang li{
	margin-top: 10px;
}
.tanchukuang p{
	font-size:14px;
	color: rgb(205, 179, 43);
    line-height: 14px;
}
.all_tin {
	position: absolute;
	height: 74px;
	width: 26px;
	top: 50%;
	left: 50%;
	margin: -37px -13px;
}
.tin {
	height: 26px;
	width: 26px;
}
.false {
	margin-top: 22px;
}
.bottom {
	position: absolute;
	height: 36px;
	width: 100%;
	bottom: 0;
}
.border_left {
	position: absolute;
	height: 100%;
	left: 0;
	right: 50px;
	font-family: "cong";
	font-size: 20px;
	padding-left: 15px;
	line-height: 36px;
	letter-spacing: 8px;
	background-color: #cccccc;
}
.core {
	position: absolute;
	height: 26px;
	width: 26px;
	left: 13px;
	top: 5px;
}
.border_right {
	position: relative;
	height: 100%;
	width: 50px;
	float: right;
}
.border_right img {
	position: absolute;
	height: 18px;
	width: 25px;
	margin: 9px 12.5px;
}
#mcover {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    z-index: 20000;
 }
#mcover img {
    position: fixed;
    right: 18px;
    top: 5px;
    width: 260px!important;
    height: 180px!important;
    z-index: 20001;
 }
#mcover1{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	z-index: 20000;
	display: none;
}
#mcover3{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0);
	z-index: 9;
	display: none;
}
#mcover1 div{
	background: #202f47;
	width: 60%;
	height: 18%;
	margin: -24% 0 0 -30%;
	text-align: center;
	position: absolute;
	left: 50%;
	top: 50%;
	border-radius: 15px;

}
#mcover1 #xian{
	border: 1px solid #C9B231;
	height: 84px;
	width: 187px;
	position: absolute;
	top: 69px;
	left: 39.5%;
	text-align: center;
	border-radius:0 ;
}
#mcover1 div p{
	padding-top: 20px;
	font-family: "fang";
	font-size: 13px;
	color: #c9b231;
}
#mcover1 div button{
	padding-top: 4px;
	background: none;
	font-family: "cong";
	font-size: 22px;
	color: #c9b231;
	border: none;
}
@media only screen and (-webkit-device-pixel-ratio:.75){
	.fojing_pic{
		height: 500px;
	}
	.write{
		top: 500px;
	}
}
@media screen and (min-width:1200px){
    .fojing_pic{
		height: 500px;
	}
	.write{
		top: 500px;
	}
}
@media screen and (min-width: 960px) and (max-width: 1199px) {
	.fojing_pic{
		height: 500px;
	}
	.write{
		top: 500px;
	}
}

@media screen and (min-width: 768px) and (max-width: 959px) {
	.fojing_pic{
		height: 500px;
	}
	.write{
		top: 500px;
	}
}
@media only screen and (min-width: 480px) and (max-width: 767px){
	.fojing_pic{
		height: 400px;
	}
	.write{
		top: 400px;
	}
}
/*@media only screen and (max-width: 479px) {*/
	/*.fojing_pic{*/
		/*height: 380px;*/
	/*}*/
	/*.write{*/
		/*top: 380px;*/
	/*}*/
	/*.tanchukuang{*/
		/*margin-top: -57px*/
	/*}*/
/*}*/

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */

    .fojing_pic{
		height: 400px;
	}
	.write{
		top: 400px;
	}

}

@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */

    .fojing_pic{
		height: 400px;
	}
	.write{
		top: 400px;
	}

}


/*@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){!* 兼容iphone6 *!*/

    /*.fojing_pic{*/
		/*height: 500px;*/
	/*}*/
	/*.write{*/
		/*top: 500px;*/
	/*}*/

/*}*/
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
    .fojing_pic{
        height: 470px;
    }
    .write {
        top: 430px;
    }
}


@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 Plus */

    .fojing_pic{
		height: 500px;
	}
	.write{
		top: 500px;
	}

}
@media only screen and (-webkit-device-pixel-ratio:.75){
	.fojing_pic{
		height: 400px;
	}
	.write{
		top: 400px;
	}
}
@media only screen and (-webkit-device-pixel-ratio:1){
	.fojing_pic{
		height: 470px;
	}
	.write{
		top: 430px;
	}
}
@media only screen and (-webkit-device-pixel-ratio:1.5){
	.fojing_pic{
		height: 500px;
	}
	.write{
		top: 500px;
	}
}